<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教学管理信息服务平台 - 教师</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header {
      background-color: #0078d7;
      color: white;
      padding: 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo img {
      height: 40px;
      margin-right: 10px;
    }

    .logo h1 {
      margin: 0;
      font-size: 20px;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .user-info a {
      color: white;
      text-decoration: none;
      margin-left: 15px;
      font-size: 14px;
    }

    .user-info a:hover {
      text-decoration: underline;
    }

    nav {
      background-color: #006cc1;
      padding: 0 20px;
    }

    .nav-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .nav-links li {
      position: relative;
    }

    .nav-links a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 12px 15px;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    .nav-links a:hover {
      background-color: #005da9;
    }

    .submenu {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 180px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      z-index: 1;
      border-radius: 0 0 4px 4px;
      list-style: none;
      padding: 0;
    }

    .submenu li a {
      color: #333;
      padding: 10px 15px;
      display: block;
      text-decoration: none;
      font-size: 14px;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.3s;
    }

    .submenu li a:hover {
      background-color: #f5f5f5;
      color: #0078d7;
    }

    .nav-links li:hover .submenu {
      display: block;
    }

    .main-container {
      display: flex;
      flex: 1;
      padding: 20px;
    }

    .sidebar {
      width: 200px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin-right: 20px;
      padding: 15px;
    }

    .sidebar-menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar-menu li {
      margin-bottom: 5px;
    }

    .sidebar-menu a {
      display: block;
      padding: 10px;
      color: #333;
      text-decoration: none;
      border-radius: 3px;
      transition: background-color 0.3s;
      font-size: 14px;
    }

    .sidebar-menu a:hover,
    .sidebar-menu a.active {
      background-color: #f0f7ff;
      color: #0078d7;
    }

    .sidebar-menu a i {
      margin-right: 8px;
    }

    .content {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .teacher-profile {
      width: 100%;
      display: flex;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      padding: 15px;
    }

    .teacher-info {
      display: flex;
      flex-direction: column;
      padding: 10px 20px;
    }

    .teacher-info h2 {
      margin: 0;
      font-size: 20px;
      color: #0078d7;
    }

    .teacher-info p {
      margin: 5px 0 0;
      color: #666;
      font-size: 14px;
    }

    .section {
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 15px;
      margin-bottom: 20px;
      width: calc(50% - 10px);
      box-sizing: border-box;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }

    .section-title {
      margin: 0;
      font-size: 16px;
      color: #333;
    }

    .view-more {
      color: #0078d7;
      text-decoration: none;
      font-size: 14px;
    }

    .view-more:hover {
      text-decoration: underline;
    }

    .course-table {
      width: 100%;
      border-collapse: collapse;
    }

    .course-table th,
    .course-table td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }

    .course-table th {
      font-weight: bold;
      background-color: #f9f9f9;
    }

    .resource-list,
    .student-list,
    .message-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .resource-list li,
    .student-list li,
    .message-list li {
      padding: 10px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }

    .resource-list li:last-child,
    .student-list li:last-child,
    .message-list li:last-child {
      border-bottom: none;
    }

    /* 教师信息维护相关样式 */
    .info-edit-section {
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 15px;
      width: 100%;
      display: none;
    }

    .info-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
    }

    .tab {
      padding: 10px 15px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }

    .tab.active {
      border-bottom: 2px solid #0078d7;
      color: #0078d7;
    }

    /* 模态框样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: white;
      margin: 10% auto;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      width: 60%;
      max-width: 800px;
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <div class="header-top">
        <div class="logo">
          <img src="logo.png" alt="Logo">
          <h1>教学管理信息服务平台</h1>
        </div>
        <div class="user-info">
          <a href="#" id="user-name">教师</a>
          <a href="#" id="logout">退出</a>
        </div>
      </div>
      <nav>
        <ul class="nav-links">
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">课程管理</a>
            <ul class="submenu">
              <li><a href="#course-list">课程列表</a></li>
              <li><a href="#course-schedule">教学计划</a></li>
              <li><a href="#course-materials">教学资料</a></li>
            </ul>
          </li>
          <li>
            <a href="#">学生管理</a>
            <ul class="submenu">
              <li><a href="#student-list">学生名单</a></li>
              <li><a href="#grade-management">成绩管理</a></li>
              <li><a href="#attendance">考勤管理</a></li>
            </ul>
          </li>
          <li>
            <a href="#">个人信息</a>
            <ul class="submenu">
              <li><a href="#personal-info">基本信息</a></li>
              <li><a href="#info-edit">信息维护</a></li>
            </ul>
          </li>
          <li>
            <a href="#">系统消息</a>
            <ul class="submenu">
              <li><a href="#notifications">通知</a></li>
              <li><a href="#messages">站内信</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>

    <div class="main-container">
      <div class="sidebar">
        <ul class="sidebar-menu">
          <li><a href="#course-management" class="active">课程管理</a></li>
          <li><a href="#teaching-materials">教学资料</a></li>
          <li><a href="#student-management">学生管理</a></li>
          <li><a href="#messages">消息中心</a></li>
        </ul>
      </div>

      <div class="content">
        <div class="teacher-profile">
          <div class="teacher-info">
            <h2>张教授</h2>
            <p>计算机科学与技术学院</p>
          </div>
        </div>

        <!-- 课程管理区域 -->
        <div class="section">
          <div class="section-header">
            <h3 class="section-title">我的课程</h3>
            <a href="#" class="view-more">更多</a>
          </div>
          <table class="course-table">
            <tr>
              <th>课程名称</th>
              <th>时间</th>
              <th>地点</th>
              <th>学生人数</th>
            </tr>
            <!-- 课程列表将通过JavaScript动态填充 -->
          </table>
        </div>

        <!-- 教学资料区域 -->
        <div class="section">
          <div class="section-header">
            <h3 class="section-title">教学资料</h3>
            <a href="#" class="view-more">更多</a>
          </div>
          <ul class="resource-list">
            <!-- 资料列表将通过JavaScript动态填充 -->
          </ul>
        </div>

        <!-- 学生管理区域 -->
        <div class="section">
          <div class="section-header">
            <h3 class="section-title">学生名单</h3>
            <a href="#" class="view-more">更多</a>
          </div>
          <ul class="student-list">
            <!-- 学生列表将通过JavaScript动态填充 -->
          </ul>
        </div>

        <!-- 消息区域 -->
        <div class="section">
          <div class="section-header">
            <h3 class="section-title">最新消息</h3>
            <a href="#" class="view-more">更多</a>
          </div>
          <ul class="message-list">
            <!-- 消息列表将通过JavaScript动态填充 -->
          </ul>
        </div>

        <!-- 教师信息维护区域 -->
        <div class="info-edit-section">
          <div class="section-header">
            <h3 class="section-title">个人信息维护</h3>
          </div>
          <div class="info-tabs">
            <div class="tab active" data-tab="basic">基本信息</div>
            <div class="tab" data-tab="academic">学术信息</div>
            <div class="tab" data-tab="teaching">教学信息</div>
          </div>
          <div class="tab-content">
            <!-- 基本信息表单 -->
            <form id="basic-info-form">
              <div style="display: flex; flex-wrap: wrap;">
                <div style="width: 50%; padding: 10px; box-sizing: border-box;">
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">工号:</label>
                    <input type="text" id="teacher-id" value="T20001" readonly
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9;">
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">姓名:</label>
                    <input type="text" id="name" value="张教授"
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">性别:</label>
                    <select id="gender" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                      <option value="男" selected>男</option>
                      <option value="女">女</option>
                    </select>
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">所属院系:</label>
                    <input type="text" id="department" value="计算机科学与技术学院"
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  </div>
                </div>
                <div style="width: 50%; padding: 10px; box-sizing: border-box;">
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">职称:</label>
                    <select id="title" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                      <option value="教授" selected>教授</option>
                      <option value="副教授">副教授</option>
                      <option value="讲师">讲师</option>
                      <option value="助教">助教</option>
                    </select>
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">电子邮箱:</label>
                    <input type="email" id="email" value="professor@example.edu.cn"
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">联系电话:</label>
                    <input type="tel" id="phone" value="13800138000"
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">办公室:</label>
                    <input type="text" id="office" value="信息楼A-301"
                      style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  </div>
                </div>
              </div>
              <div style="margin-top: 20px; display: flex; justify-content: center;">
                <button type="button" id="save-info-btn"
                  style="padding: 10px 25px; border: none; background-color: #0078d7; color: white; border-radius: 3px; margin-right: 15px; cursor: pointer;">保存更改</button>
                <button type="button" id="cancel-info-btn"
                  style="padding: 10px 25px; border: 1px solid #ccc; background-color: white; color: #333; border-radius: 3px; cursor: pointer;">取消</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      console.log('教师页面已加载');

      // 检查登录状态和账号审核状态
      const userToken = localStorage.getItem('userToken');

      // 如果没有登录令牌，重定向到登录页面
      if (!userToken) {
        console.log('未找到登录令牌，重定向到登录页面');
        window.location.href = 'index.html';
        return;
      }

      // 验证用户信息并加载数据
      validateUserAndLoadData();

      // 验证用户信息并加载数据
      async function validateUserAndLoadData() {
        try {
          const response = await fetch('/api/user/info', {
            headers: {
              'Authorization': `Bearer ${userToken}`
            }
          });

          if (!response.ok) {
            throw new Error('获取用户信息失败');
          }

          const data = await response.json();

          if (!data.success) {
            throw new Error(data.message || '验证失败');
          }

          // 检查用户状态和角色
          if (data.user.status !== 'approved') {
            alert('您的账号尚未通过审核，无法访问教师页面');
            window.location.href = 'index.html';
            return;
          }

          if (data.user.role !== 'teacher') {
            alert('您不是教师用户，无法访问此页面');
            window.location.href = 'index.html';
            return;
          }

          // 填充用户信息
          if (data.user.profile) {
            document.querySelector('.teacher-info h2').textContent = `${data.user.profile.real_name || data.user.username} ${data.user.profile.title || '教师'}`;
            document.querySelector('.teacher-info p').textContent = `${data.user.profile.department || ''}`;
            document.getElementById('user-name').textContent = data.user.profile.real_name || data.user.username;
          }

          // 加载教师页面数据
          loadTeacherData();
        } catch (error) {
          console.error('验证用户失败:', error);
          alert('验证用户身份失败，请重新登录');
          localStorage.removeItem('userToken');
          window.location.href = 'index.html';
        }
      }

      // 加载教师页面数据
      function loadTeacherData() {
        console.log('加载教师数据');
        // 这里可以添加加载课程、学生、通知等数据的代码

        // 模拟课程数据
        const courses = [
          { name: '数据结构', time: '周一 8:00-9:40', location: '教学楼A-101', students: 45 },
          { name: '算法分析', time: '周三 10:00-11:40', location: '教学楼B-203', students: 38 },
          { name: '计算机网络', time: '周五 14:00-15:40', location: '教学楼C-305', students: 42 }
        ];

        // 填充课程表
        const courseTable = document.querySelector('.course-table');
        courses.forEach(course => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${course.name}</td>
            <td>${course.time}</td>
            <td>${course.location}</td>
            <td>${course.students}</td>
          `;
          courseTable.appendChild(row);
        });

        // 模拟教学资料数据
        const resources = [
          '数据结构课件 (2023-2024-2)',
          '算法分析习题集',
          '计算机网络实验指导'
        ];

        // 填充教学资料列表
        const resourceList = document.querySelector('.resource-list');
        resources.forEach(resource => {
          const li = document.createElement('li');
          li.textContent = resource;
          resourceList.appendChild(li);
        });

        // 模拟学生数据
        const students = [
          '2022级 计算机科学与技术1班',
          '2022级 软件工程2班',
          '2023级 人工智能1班'
        ];

        // 填充学生列表
        const studentList = document.querySelector('.student-list');
        students.forEach(student => {
          const li = document.createElement('li');
          li.textContent = student;
          studentList.appendChild(li);
        });

        // 模拟消息数据
        const messages = [
          '系统通知: 2023-2024学年第二学期教学任务已分配',
          '成绩提交截止日期: 2024年7月10日',
          '教师考核材料提交通知'
        ];

        // 填充消息列表
        const messageList = document.querySelector('.message-list');
        messages.forEach(message => {
          const li = document.createElement('li');
          li.textContent = message;
          messageList.appendChild(li);
        });
      }

      // 处理侧边栏菜单点击事件
      document.querySelectorAll('.sidebar-menu a').forEach(link => {
        link.addEventListener('click', function (e) {
          e.preventDefault();

          // 移除所有链接的active类
          document.querySelectorAll('.sidebar-menu a').forEach(a => a.classList.remove('active'));

          // 添加当前链接的active类
          this.classList.add('active');

          // 获取点击的菜单项
          const target = this.getAttribute('href').substring(1);

          // 根据点击的菜单项显示相应内容
          // 这里可以添加显示不同内容的逻辑
        });
      });

      // 处理导航菜单点击事件
      document.querySelectorAll('.submenu a').forEach(link => {
        link.addEventListener('click', function (e) {
          e.preventDefault();

          const target = this.getAttribute('href').substring(1);

          // 处理个人信息编辑
          if (target === 'info-edit') {
            document.querySelector('.info-edit-section').style.display = 'block';

            // 隐藏其他内容
            document.querySelectorAll('.section').forEach(section => {
              section.style.display = 'none';
            });
            document.querySelector('.teacher-profile').style.display = 'none';
          } else if (target === 'personal-info') {
            // 显示个人信息
            document.querySelector('.teacher-profile').style.display = 'flex';
            document.querySelector('.info-edit-section').style.display = 'none';

            // 显示其他内容
            document.querySelectorAll('.section').forEach(section => {
              section.style.display = 'block';
            });
          }
        });
      });

      // 处理标签页切换
      document.querySelectorAll('.info-tabs .tab').forEach(tab => {
        tab.addEventListener('click', function () {
          // 移除所有标签的active类
          document.querySelectorAll('.info-tabs .tab').forEach(t => t.classList.remove('active'));

          // 添加当前标签的active类
          this.classList.add('active');

          // 获取目标标签页
          const target = this.getAttribute('data-tab');

          // 模拟标签页切换
          if (target !== 'basic') {
            alert(`${target === 'academic' ? '学术信息' : '教学信息'}标签页功能正在开发中`);
          }
        });
      });

      // 保存信息按钮点击事件
      const saveInfoBtn = document.getElementById('save-info-btn');
      if (saveInfoBtn) {
        saveInfoBtn.addEventListener('click', function () {
          // 收集表单数据
          const formData = {
            teacherId: document.getElementById('teacher-id').value,
            name: document.getElementById('name').value,
            gender: document.getElementById('gender').value,
            department: document.getElementById('department').value,
            title: document.getElementById('title').value,
            email: document.getElementById('email').value,
            phone: document.getElementById('phone').value,
            office: document.getElementById('office').value
          };

          console.log('保存信息:', formData);
          alert('信息已更新');
        });
      }

      // 取消按钮点击事件
      const cancelInfoBtn = document.getElementById('cancel-info-btn');
      if (cancelInfoBtn) {
        cancelInfoBtn.addEventListener('click', function () {
          // 显示所有内容
          document.querySelector('.teacher-profile').style.display = 'flex';
          document.querySelectorAll('.section').forEach(section => {
            section.style.display = 'block';
          });

          // 隐藏编辑表单
          document.querySelector('.info-edit-section').style.display = 'none';
        });
      }

      // 退出按钮点击事件
      document.getElementById('logout').addEventListener('click', function (e) {
        e.preventDefault();
        localStorage.removeItem('userToken');
        window.location.href = 'index.html';
      });
    });
  </script>
</body>

</html>